<template>
    <div class="centered">
      <span>Hello World</span>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HelloWorldCentered'
  }
  </script>
  
  <style scoped>
  .centered {
    /* 让容器撑满整个视口 */
    height: 100vh;
    width: 100vw;
    
    /* 使用 Flex 实现居中对齐 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
  
    /* 可选：设置背景色看得更清楚 */
    background-color: #f0f0f0;
  }
  
  .centered span {
    font-size: 150px;       /* 放大字体 */
    font-weight: bold;     /* 加粗 */
    color: #333;           /* 字体颜色 */
  }
  </style>
  